<template>
	<view class="empty-box" @click="errmsg" :style="{ width: `${width}rpx`, height: `${height}` }">
		<image :src="imgurl ? imgurl : img_config[mode].url" mode="widthFix" class="imgs" :style="{ width: `${width * 0.67}rpx` }"></image>
		<text class="subtitle">{{ title ? title : img_config[mode].title }}</text>
		<view @click.stop="btnsclick" class="subbtns" v-if="btntext">{{ btntext }}</view>
		<image src="/static/images/logobt.png" mode="heightFix" class="botlogo" v-if="showftlogo" @click.stop="btnsclick"></image>
	</view>
</template>

<script>
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'empty',
	props: {
		// judge: {
		// 	tyle: [String, Array, Object],
		// 	default: []
		// },
		width: {
			type: [String],
			default: '750',
		},
		height: {
			type: [String],
			default: '60vh',
		},
		// null 和 fail失败
		mode: {
			type: String,
			default: 'null',
		},
		imgurl: {
			type: String,
			default: '',
		},
		title: {
			type: String,
			default: '',
		},

		btntext: {
			type: String,
			default: '',
		},
		//是否显示底部logo
		showftlogo: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			img_config: {
				null: {
					url: '/static/images/empty_null.png',
					title: '暂无内容~',
				},
				fail: {
					url: '/static/images/empty_fail.png',
					title: '加载失败~',
				},
			},
		};
	},
	methods: {
		errmsg() {
			this.$emit('errmsg');
		},
		btnsclick() {
			this.$emit('btnsclick');
		},
	},
};
</script>

<style lang="scss">
.empty_view {
	width: 100%;
}

.empty-box {
	width: 100%;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	// background-color: pink;

	.imgs {
		// height: 274rpx;
		width: 100%;
		max-width: 500rpx;
		// margin-top: 26vw;
		margin-bottom: 30rpx;
		height: auto;
	}

	.subtitle {
		width: 100%;
		max-width: 590rpx;
		// font-size: 24rpx;
		// color: #969696;
		text-align: center;
		// line-height: 36rpx;

		font-size: 28rpx;
		padding: 20rpx;
		color: #8d8d8d;
	}

	.subbtns {
		min-width: 258rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #1fd1c2;
		padding: 0 20rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		margin: 56rpx auto 0;
	}

	.botlogo {
		height: 52rpx;
		position: absolute;
		left: 50%;
		bottom: 52rpx;
		transform: translateX(-50%);
		z-index: 3;
	}
}
</style>
